<template>
    <view class="box">
        <!-- <view class="videWrpa" v-if="videoShow" @click="goVideo">视频</view> -->
        <!-- 图片轮播 -->
        <view class="u-demo-block">
            <u-swiper
                :list="currentProduct.topImage"
                @change="(e) => (currentNum = e.current)"
                :autoplay="false"
                indicatorStyle="right: 40rpx"
                height="750rpx"
                radius="0"
                imgMode="aspectFit"
                @click="topImageClick"
            >
                <view slot="indicator" class="indicator-num">
                    <text class="indicator-num__text"
                        >{{ currentNum + 1 }}/{{
                            currentProduct.topImage.length
                        }}</text
                    >
                </view>
            </u-swiper>
        </view>
        <!-- 标题模块 -->
        <view
            class="title"
            :style="{
                paddingBottom:
                    currentProduct.keyword.length === 0 ? '24rpx' : '0',
            }"
        >
            <u-text :text="currentProduct.goodsName" size="30rpx" bold />
            <view class="price">
                <text class="price_t">￥</text>
                <text v-if="currentProduct">{{
                    formatDecimal(
                        numDiv(
                            numDiv(
                                currentProduct.price * currentProduct.discount,
                                100
                            ),
                            100
                        )
                    )
                }}</text>
            </view>
            <u-gap height="8rpx" />
            <view class="flex_wrap row_between">
                <view class="flex_wrap title-t">
                    <block
                        v-if="
                            currentProduct.keyword &&
                            currentProduct.keyword.length > 0
                        "
                    >
                        <text
                            v-for="item in currentProduct.keyword"
                            :key="item"
                            >{{ item }}</text
                        >
                    </block>
                </view>
                <view
                    class="flex_wrap price-btn"
                    v-if="
                        currentProduct.goodsType !== 'FEED_FLAG' &&
                        currentProduct.goodsType !== 'CHICKEN_FLAG'
                    "
                >
                    <!-- <text>转发</text> -->
                    <u-icon
                        label="分享"
                        width="20rpx"
                        labelPos="left"
                        labelSize="24rpx"
                        size="24rpx"
                        labelColor="#fff"
                        name="/pages_shop/static/img/shop/share.png"
                        @click="share"
                    ></u-icon>
                </view>
            </view>
        </view>
        <u-gap
            height="14rpx"
            bgColor="#F5F5F5"
            v-if="
                currentProduct.returnReceiver ||
                currentProduct.returnReceiverPhone ||
                currentProduct.reportingPeriod ||
                currentProduct.returnAddress
            "
        />
        <!-- 地址报告 -->
        <view
            class="address flex_wrap flex_column"
            v-if="
                currentProduct.returnReceiver ||
                currentProduct.returnReceiverPhone ||
                currentProduct.reportingPeriod ||
                currentProduct.returnAddress
            "
        >
            <u-row v-if="currentProduct.reportingPeriod">
                <u-col span="3"
                    ><u--text text="报告周期" bold size="26rpx"
                /></u-col>
                <u-col span="8"
                    ><u-text
                        :text="currentProduct.reportingPeriod + '个工作日'"
                        size="26rpx"
                /></u-col>
            </u-row>
            <u-gap height="20rpx" v-if="currentProduct.returnAddress" />
            <u-row
                justify="space-between"
                align="top"
                v-if="currentProduct.returnAddress"
            >
                <u-col span="3"
                    ><u-text text="回寄地址" size="26rpx" bold
                /></u-col>
                <u-col span="9"
                    ><u-text :text="currentProduct.returnAddress" size="26rpx"
                /></u-col>
            </u-row>
            <u-gap
                height="20rpx"
                v-if="
                    currentProduct.returnReceiver ||
                    currentProduct.returnReceiverPhone
                "
            />
            <u-row
                v-if="
                    currentProduct.returnReceiver ||
                    currentProduct.returnReceiverPhone
                "
            >
                <u-col span="3"
                    ><u-text text="收件人" bold size="26rpx"
                /></u-col>
                <u-col span="9"
                    ><u--text
                        :text="`${currentProduct.returnReceiver} ${currentProduct.returnReceiverPhone}`"
                        size="26rpx"
                /></u-col>
            </u-row>
        </view>
        <u-gap height="14rpx" bgColor="#F5F5F5" />
        <view
            class="detailImages"
            v-if="
                currentProduct.detailImage &&
                currentProduct.detailImage.length > 0
            "
        >
            <view style="padding: 20rpx 28rpx 24rpx"
                ><u--text
                    color="#333"
                    text="详情介绍"
                    size="30rpx"
                    bold
                ></u--text>
            </view>
            <u-gap height="20rpx" />
            <view
                style="width: 100vw; padding: 0 28rpx; box-sizing: border-box"
            >
                <u-image
                    width="100%"
                    lazyLoad
                    :src="item"
                    v-for="(item, index) in currentProduct.detailImage"
                    mode="widthFix"
                    height="auto"
                    :key="item"
                    @click="previewDetailImage(item)"
                />
            </view>
            <u-gap height="140rpx" />
        </view>
        <u-gap height="17rpx;" bgColor="#FFF"></u-gap>
        <view class="purchase safeAreaBottom"
            ><u-button
                text="立即购买"
                color="#588BF3"
                :hairline="false"
                shape="circle"
                :customStyle="buttonCustomStyle"
                @click="toBuy"
        /></view>
        <!-- 规格弹框 -->
        <u-popup :round="20" :show="show" @close="close" @open="open">
            <view class="specifications safeAreaBottom">
                <view class="price">
                    <text class="price_t">￥</text>
                    <text>{{ formatDecimal(getPriceSkuPrice) }}</text>
                    <u-gap
                        marginTop="20rpx"
                        marginBottom="24rpx"
                        height="2rpx;"
                        bgColor="#F3F3F3"
                    ></u-gap>
                </view>
                <scroll-view
                    scroll-y="true"
                    style="max-height: 600rpx"
                    v-if="currentProduct.simpleSpecs"
                >
                    <view
                        v-for="(item, index) in currentProduct.simpleSpecs"
                        :key="item.specificationName"
                    >
                        <u-text
                            :text="item.specificationName"
                            size="28rpx"
                            bold
                        ></u-text>
                        <u-gap height="16rpx;"></u-gap>
                        <view class="flex_wrap typeChoose">
                            <view class="specs">
                                <view
                                    class="tag-item"
                                    v-for="(
                                        specsItem, specsItemIndex
                                    ) in item.items"
                                    :key="specsItem.value"
                                >
                                    <u-tag
                                        borderColor="#588BF3"
                                        size="medium"
                                        :text="specsItem.value"
                                        :plain="!specsItem.checked"
                                        :name="specsItemIndex"
                                        @click="radioClick($event, index)"
                                    />
                                </view>
                            </view>
                        </view>
                        <u-gap
                            marginTop="6rpx"
                            marginBottom="24rpx"
                            height="2rpx;"
                            bgColor="#F3F3F3"
                        ></u-gap>
                    </view>
                </scroll-view>
                <!-- <u-gap marginTop="30rpx" marginBottom="24rpx" height="4rpx;" bgColor="#F3F3F3"></u-gap> -->
                <!-- 购买 -->
                <view
                    class="flex_wrap row_between"
                    style="
                        padding-right: 54rpx;
                        box-sizing: border-box;
                        margin-bottom: 32rpx;
                    "
                >
                    <view style="width: 200rpx"
                        ><u-text text="购买数量" size="28rpx" bold></u-text
                    ></view>
                    <u-number-box
                        v-model="productCount"
                        :min="getQuantity === 0 ? 0 : 1"
                        :max="getQuantity"
                        integer
                    >
                        <!-- <view slot="minus" class="minus"
                            ><u-icon name="minus" size="12"></u-icon
                        ></view>
                        <text
                            slot="input"
                            style="text-align: center"
                            class="input"
                            >{{ productCount }}</text
                        >
                        <view slot="plus" class="plus"
                            ><u-icon
                                name="plus"
                                color="#FFFFFF"
                                size="12"
                            ></u-icon
                        ></view> -->
                    </u-number-box>
                </view>
                <u-button
                    :disabled="productCount === 0 ? true : false"
                    text="立即购买"
                    color="#588BF3"
                    :customStyle="{ ...buttonCustomStyle, width: '694rpx' }"
                    shape="circle"
                    @click="buy()"
                />
            </view>
        </u-popup>
        <u-popup
            :show="showQR"
            :round="10"
            mode="center"
            @close="showQR = false"
            @touchmove.stop.prevent="() => {}"
        >
            <view class="QRWrap">
                <u--image
                    :src="baseSrc"
                    width="200px"
                    height="200px"
                ></u--image>
            </view>
        </u-popup>
        <!-- 转发弹框 -->
        <u-popup
            :show="showShare"
            mode="bottom"
            @close="closeShare"
            @open="openShare"
            closeOnClickOverlay
            :closeable="true"
            @touchmove.stop.prevent="() => {}"
        >
            <!-- 商品小程序二维码 -->

            <view
                style="
                    height: 324rpx;
                    text-align: center;
                    font-size: 28rpx;
                    margin-top: 12rpx;
                "
                @touchmove.stop.prevent="() => {}"
            >
                <!-- <text>分享给</text> -->
                <view
                    class=""
                    style="
                        margin-top: 50rpx;
                        display: flex;
                        justify-content: center;
                    "
                >
                    <button open-type="share">
                        <image
                            src="@/pages_shop/static/img/shop/weixin.png"
                            mode=""
                            style="width: 80rpx; height: 80rpx"
                        ></image>
                        <view style="margin-top: 10rpx">微信好友</view>
                    </button>
                    <button @click="QRcodeFun">
                        <image
                            src="@/pages_shop/static/img/shop/Frame1.png"
                            mode=""
                            style="width: 80rpx; height: 80rpx"
                        ></image>
                        <view style="margin-top: 10rpx">小程序码</view>
                    </button>
                </view>
            </view>
        </u-popup>
        
        <!-- 二维码弹窗组件 -->
        <qrcode-popup
          :show="showQRCodePopup"
          title="请前往小程序购买"
          @close="handleQRCodeClose"
          @save-success="handleQRCodeSaveSuccess"
          @save-fail="handleQRCodeSaveFail"
        />
    </view>
</template>

<script>
import { getGoodsDetail } from "@/api/shopSalesman.js";
import { salesmanInfo } from "@/api/userSalesman.js";
import {
    numAdd,
    numSub,
    numMulti,
    numDiv,
} from "@/js_sdk/nl-precisionNum/precisionNum.js";
import { formatDecimal } from "@/utils/index.js";
import { getMiniCodeByAppId } from "@/api/orderSalesman.js";
import { baseUrl } from "@/config/tendIdConfig";
import QRCodePopup from '@/components/qrcode-popup/qrcode-popup.vue';

export default {
    components: {
        QRCodePopup,
    },
    data() {
        return {
            showQR: false,
            baseSrc: "",
            showShare: false,
            productCount: 1,
            show: false,
            productId: "",
            showQRCodePopup: false,
            appLogoImage: "https://oneredhealth.oss-cn-hangzhou.aliyuncs.com/2023/10/23/0e6265fd99fa49a9bacf3791420d6de6.png", // 使用app logo作为临时二维码图片
            buttonCustomStyle: {
                width: "526rpx",
                height: "80rpx",
                outline: "none",
                border: "none",
                // fontSize: '32rpx'
            },
            currentProduct: null,
            currentNum: 0,
            formatDecimal: formatDecimal,
            numAdd, //加
            numSub, //减
            numMulti, //乘
            numDiv, //除
            videoShow: false,
        };
    },
    onLoad(options) {
        // TODO 这段代码解决 业务员商品分享给客户 客户角色进入 重定向到客户的商品详情页面（业务和客户商城不一致，分为两套，）customer 客户端 salesman
        if (this.$store.getters?.authority === "customer") {
            let pages = getCurrentPages();
            let currentPage = pages[pages.length - 1];
            uni.$u.route({
                type: "redirectTo",
                url: "pages_shop1/goods/index",
                params: currentPage.options,
            });
            return;
        }
        this.productId = options.id || options.scene;
        this.getGoodsDetailById(this.productId);
    },
    computed: {
        getQuantity() {
            // 获取库存
            if (
                this.currentProduct &&
                this.currentProduct.goodsSkuList.length
            ) {
                // 如果存在sku
                const result = this.currentProduct.goodsSkuList.filter(
                    (item) => {
                        return this.getSimpleSpecs === item.simpleSpecs;
                    }
                );
                if (result) {
                    return result[0].quantity;
                } else {
                    return 0;
                }
            } else {
                //否则;
                return this.currentProduct && this.currentProduct.quantity;
            }
        },
        getSimpleSpecs() {
            const specs =
                (this.currentProduct &&
                    this.currentProduct.simpleSpecs.map((item) => {
                        const value = item.items.filter((itemsItem) => {
                            return itemsItem.checked === true;
                        })[0].value;
                        return value;
                    })) ||
                [];
            return specs.join(";");
        },
        getSkuId() {
            if (
                this.currentProduct &&
                this.currentProduct.goodsSkuList.length > 0
            ) {
                // 如果存在sku
                const sku =
                    this.currentProduct &&
                    this.currentProduct.goodsSkuList.filter((item) => {
                        return item.simpleSpecs === this.getSimpleSpecs;
                    });
                if (sku && sku.length > 0) {
                    return sku[0].id;
                } else {
                    return sku;
                }
            } else {
                // 否则
                return null;
            }
        },
        getPriceSkuPrice() {
            if (
                this.currentProduct &&
                this.currentProduct.goodsSkuList.length > 0
            ) {
                const sku =
                    this.currentProduct &&
                    this.currentProduct.goodsSkuList.filter(
                        (item) => item.simpleSpecs === this.getSimpleSpecs
                    );
                if (sku && sku.length > 0) {
                    return numDiv(
                        numDiv(
                            sku[0].price * this.currentProduct.discount,
                            100
                        ),
                        100
                    );
                    // return numDiv(sku[0].price, 100);
                } else {
                    return 0;
                }
            } else {
                return (
                    this.currentProduct &&
                    numDiv(
                        numDiv(
                            this.currentProduct.price *
                                this.currentProduct.discount,
                            100
                        ),
                        100
                    )
                );
            }
        },
        getPrice() {
            console.log(
                "订单----下单 价格",
                numMulti(
                    formatDecimal(
                        numDiv(
                            numDiv(
                                this.currentProduct?.price *
                                    this.currentProduct?.discount,
                                100
                            ),
                            100
                        )
                    ),
                    this.productCount
                )
            );
            if (
                this.currentProduct &&
                this.currentProduct.goodsSkuList.length > 0
            ) {
                // 如果存在sku
                const sku = this.currentProduct.goodsSkuList.filter(
                    (item) => item.simpleSpecs === this.getSimpleSpecs
                );
                if (sku && sku.length > 0) {
                    // 折扣
                    return numMulti(
                        formatDecimal(
                            numDiv(
                                numDiv(
                                    sku[0].price * this.currentProduct.discount,
                                    100
                                ),
                                100
                            )
                        ),
                        this.productCount
                    );
                } else {
                    return 0;
                }
            } else {
                //否则
                return (
                    this.currentProduct &&
                    numMulti(
                        formatDecimal(
                            numDiv(
                                numDiv(
                                    this.currentProduct.price *
                                        this.currentProduct.discount,
                                    100
                                ),
                                100
                            )
                        ),
                        this.productCount
                    )
                );
            }
        },
    },
    onPullDownRefresh() {
        this.getGoodsDetailById(this.productId).then(() => {
            uni.stopPullDownRefresh();
        });
    },
    methods: {
        QRcodeFun() {
            this.showShare = false;
            console.log("33333333 :>> ", 33333333);
            this.showQR = true;
            const version = __wxConfig.envVersion;
            const params = {
                page: "pages_shop/goods/index",
                scene: this.currentProduct.id,
                env_version: version,
                check_path: false,
                appId: this.$appId,
            };
            getMiniCodeByAppId(params).then((res) => {
                if (res.code === 200 && res.data) {
                    var showImgData = res.data;
                    this.baseSrc = "data:image/png;base64," + showImgData;
                }
            });
        },
        toBuy() {
            this.getInfo().then(() => {
                if (this.dimission !== "0") {
                    uni.showToast({
                        icon: "none",
                        title: "已离职,不可下单",
                    });
                    return;
                } else {
                    this.getGoodsDetailById(this.productId).then(() => {
                        if (this.currentProduct.status !== 1) {
                            uni.showToast({
                                icon: "error",
                                title: "商品已下架",
                            });
                            return;
                        }
                        this.show = true;
                    });
                }
            });
        },
        //用户信息
        async getInfo() {
            //当月优胜签到最多
            const res = await salesmanInfo();
            if (res.code === 200) {
                this.dimission = res.data.dimission;
            }
        },
        radioClick(name, index) {
            this.currentProduct.simpleSpecs[index].items.map(
                (item, itemIndex) => {
                    item.checked = itemIndex === name ? true : false;
                }
            );
            // sku更换后 重新设置初始购买数量（如果库存不够了就设置为0反之为1）
            if (this.getQuantity === 0) {
                this.productCount = 0;
            } else {
                this.productCount = 1;
            }
        },
        previewDetailImage(currentImage) {
            const that = this;
            uni.previewImage({
                current: currentImage,
                urls: this.currentProduct.detailImage,
                indicator: "number",
            });
        },
        topImageClick() {
            const that = this;
            uni.previewImage({
                current: that.currentProduct.topImage[that.currentNum],
                urls: this.currentProduct.topImage,
                indicator: "number",
            });
        },
        async getGoodsDetailById(id) {
            const result = await getGoodsDetail(
                id,
                this.$store.getters.userInfo.tenantId
            );
            // 获取视频
            // 业务员和客户 目前都用客户的token 统一拦截那边已经做过处理 所以视频这里单拉出来 没走拦截器
            const token =
                uni.getStorageSync("customer_token") ||
                uni.getStorageSync("access_token");
            uni.request({
                url: baseUrl + "/customer/video_info_customer/pageVideo",
                method: "POST",
                header: {
                    Authorization: token,
                },
                data: {
                    pageNum: 1,
                    pageSize: 5,
                    goodsId: this.productId,
                },
                success: (res) => {
                    let videoRows = res?.data?.data?.rows ?? [];
                    this.videoShow = videoRows.length > 0;
                },
            });
            console.log("1111", result);
            let currentProduct = result.data || null;
            console.log(currentProduct, "currentProduct>>>>>");
            if (currentProduct) {
                const topImage =
                    (currentProduct.topImage &&
                        currentProduct.topImage.split(",")) ||
                    null;
                const thumbnail =
                    (currentProduct.thumbnail &&
                        currentProduct.thumbnail.split(",")) ||
                    null;
                const detailImage =
                    (currentProduct.detailImage &&
                        currentProduct.detailImage.split(",")) ||
                    null;
                const keyword = currentProduct.keyword
                    ? currentProduct.keyword.split(",")
                    : [];
                const simpleSpecs = JSON.parse(currentProduct.simpleSpecs);
                const simpleSpecsFormat =
                    simpleSpecs && simpleSpecs.length > 0
                        ? simpleSpecs.map((item) => {
                              item.items.forEach(
                                  (itemsItem, itemsItemIndex) => {
                                      itemsItem.checked = false;
                                      if (itemsItemIndex === 0) {
                                          itemsItem.checked = true;
                                      }
                                  }
                              );
                              return item;
                          })
                        : [];
                this.currentProduct = {
                    ...currentProduct,
                    topImage,
                    thumbnail,
                    detailImage,
                    keyword,
                    simpleSpecs: simpleSpecsFormat,
                };
                console.log(this.currentProduct, "currentProduct>>>>>222");
            }
        },
        buy() {
            if (this.currentProduct.status !== 1) {
                uni.showToast({
                    icon: "error",
                    title: "商品已下架",
                });
                return;
            }
            
            // 显示二维码弹窗，引导用户到小程序购买
            this.showQRCodePopup = true;
            return;
            
            uni.$u.route({
                url: "pages_shop/pay/confirmOrder/index",
                params: {
                    goodId: this.productId, //商品id
                    simpleSpecs: this.getSimpleSpecs || "", //商品规格
                    count: this.productCount, //商品数量
                    totalPrice: this.getPrice, //商品总价（如果商品有规格就是规格单价x选择的商品数量，商品没有规格就是商品单价x选择的数量）
                    price: numDiv(this.currentProduct.price, 100), // 商品价格
                    skuId: this.getSkuId, //商品规格ID
                    goodsName: this.currentProduct.goodsName, //商品名称
                    thumbnail: this.currentProduct.thumbnail[0], //商品缩略图
                },
            });
        },
        onShareAppMessage(res) {
            this.closeShare();
            return {
                title: this.currentProduct.goodsName,
                imageUrl: this.currentProduct?.topImage[0] ?? "",
                path: "pages_shop/goods/index?id=" + this.productId,
            };
            console.log(path, "path");
        },
        onShareTimeline: function () {
            this.closeShare();
            return {
                title: this.currentProduct.goodsName,
                imageUrl: this.currentProduct?.topImage[0] ?? "",
                path: "pages_shop/goods/index?id=" + this.productId,
            };
        },

        closeShare() {
            this.showShare = false;
        },
        openShare() {
            this.showShare = true;
        },
        share() {
            this.showShare = true;
        },
        close() {
            this.show = false;
        },
        
        // 二维码弹窗相关方法
        handleQRCodeClose() {
            this.showQRCodePopup = false;
        },
        
        handleQRCodeSaveSuccess() {
            console.log('二维码保存成功');
        },
        
        handleQRCodeSaveFail(error) {
            console.log('二维码保存失败:', error);
        },
        
        // goVideo() {
        //     uni.$u.route({
        //         type: "redirectTo",
        //         url: "pages_video/video/index",
        //         params: { productId: this.productId },
        //     });
        // },
    },
};
</script>

<style lang="scss">
.box {
    color: #333;
    background-color: #fff;

    ::v-deep .u-button__text {
        font-size: 30rpx !important;
    }

    ::v-deep .u-tag--medium {
        min-width: 124rpx;
        padding: 6rpx 34rpx;
        box-sizing: border-box;
        font-size: 24rpx;
        justify-content: center;
    }

    ::v-deep .u-tag--primary {
        background-color: #588bf3 !important;
    }

    ::v-deep .u-tag__text--primary--plain {
        color: #333 !important;
    }

    ::v-deep .u-tag__text {
        font-weight: bold !important;
    }
}

.indicator {
    @include flex(row);
    justify-content: center;

    &__dot {
        height: 6px;
        width: 6px;
        border-radius: 100px;
        background-color: rgba(255, 255, 255, 0.35);
        margin: 0 5px;
        transition: background-color 0.3s;

        &--active {
            background-color: #ffffff;
        }
    }
}

.indicator-num {
    padding: 2px 0;
    background-color: rgba(0, 0, 0, 0.35);
    border-radius: 100px;
    width: 35px;
    @include flex;
    justify-content: center;

    &__text {
        color: #ffffff;
        font-size: 12px;
    }
}

.title {
    padding: 40rpx 28rpx 24rpx;
}

.price {
    font-size: 40rpx;
    font-weight: bold;
    color: #ff0000;

    .price_t {
        font-size: 24rpx;
    }
}

.title-t {
    width: 620rpx;
    height: auto;
    display: flex;
    flex-wrap: wrap;

    text {
        display: block;
        width: 124rpx;
        height: 46rpx;
        font-size: 24rpx;
        color: #588bf3;
        background: rgba(88, 139, 243, 0.1);
        border-radius: 4rpx;
        text-align: center;
        line-height: 46rpx;
        margin-right: 16rpx;
        margin-bottom: 20rpx;
    }
}

.typeNormal {
    text {
        display: block;
        min-width: 124rpx;
        width: auto;
        height: 46rpx;
        font-size: 24rpx;
        color: #333333;
        background: #ffffff;
        border-radius: 4rpx;
        text-align: center;
        line-height: 46rpx;
        margin-right: 28rpx;
        opacity: 1;
        border: 1px solid #588bf3;
    }
}

.typeChoose {
    .tag-item {
        margin-right: 20rpx;
        margin-bottom: 24rpx;
    }

    .specs {
        display: flex;
        flex-wrap: wrap;
    }
}

.price-btn {
    width: 100rpx;
    height: 42rpx;
    background: #588bf3;
    border-radius: 20rpx;
    justify-content: center;
    // margin-bottom: 20rpx;
}

.address {
    padding: 20rpx 28rpx 24rpx;

    image {
        width: 100%;
    }
}

.detailImages {
    width: 100vw;
}

.purchase {
    position: fixed;
    min-height: 116rpx;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: auto;
    padding: 18rpx 0;
    background: #ffffff;
    box-shadow: 8rpx 0px 8rpx 2rpx rgba(0, 0, 0, 0.25);
}

// .safeArea {
// 	height: ;
// }

// 规格弹框
.specifications {
    padding: 20rpx 28rpx;
}

.videWrpa {
    width: 160rpx;
    height: 100rpx;
    background-color: #ff0000;
    color: #fff;
    position: fixed;
    top: 10rpx;
    right: 40rpx;
    z-index: 100000;
    text-align: center;
    line-height: 100rpx;
}

// 购买数量加减
.minus {
    width: 50rpx;
    height: 50rpx;
    border: 2rpx solid #e2e2e2;
    border-radius: 50%;
    @include flex;
    justify-content: center;
    // align-items: center;
}

.input {
    padding: 10rpx;
    min-width: 50rpx;
}

.QRWrap {
    padding: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.plus {
    width: 50rpx;
    height: 50rpx;
    background-color: #588bf3;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

button {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    line-height: 1;
    border-radius: 5px;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    color: #000000;
    background-color: #fff;
    font-size: 28rpx;
}

// 边框样式
button::after {
    border: 0;
}
</style>
